<template>
  <div>
    <x-header :right-options="{showMore: false}" @on-click-more="showMenus = false">{{detail.name}}</x-header>
    <div class="content">
      <div class="ximg">
        <img :src="thumb" alt="">
        <badge :text="detail.species"></badge>
      </div>
      <div class="other">他们还叫：{{detail.other_name}}</div>
      <div class="lable">营养含量/100g可食部分</div>
      <div class="desc">
        <card>
          <div slot="content" class="card-demo-flex card-demo-content01">
            <div class="vux-1px-l vux-1px-r">
              <span class="green">{{detail.fat}}</span>g
              <br/>
              脂肪
            </div>
            <div class="vux-1px-r">
              <span :class="purineColor">{{detail.purine}}</span>mg
              <br/>
              <div class="orange">嘌呤</div>
            </div>
            <div class="vux-1px-r">
              <span class="green">0</span>kcal
              <br/>
              热量
            </div>
          </div>
        </card>
        <card>
          <div slot="content" class="card-demo-flex card-demo-content01">
            <div class="vux-1px-l vux-1px-r">
              <span class="green">{{detail.fat}}</span>g
              <br/>
              碳水化合物
            </div>
            <div class="vux-1px-r">
              <span class="green">15</span>g
              <br/>
              蛋白质
            </div>
            <div class="vux-1px-r">
              <span class="green">0</span>g
              <br/>
              膳食纤维
            </div>
          </div>
        </card>
      </div>
      <div class="lable" v-show="detail.comment">食物评价</div>
      <div class="desc">{{detail.comment}}</div>
      <div class="lable" v-show="detail.description">其他</div>
      <div class="desc">{{detail.description}}</div>
      <divider>扫描二维码关注</divider>
      <img :src="qrcode" alt="" class="qrcode">
    </div>
  </div>
</template>

<style scoped>
  .desc{background: #fff;padding:10px;}
  .lable{padding:10px}
  .other{background: #fff;padding:10px;}
  .qrcode{display: block;margin:auto;max-width: 100%}

  .ximg img{width:100%}
  .vux-badge{position: absolute;left:0;margin-top:-3rem;font-size: 1rem;height: 2rem;line-height: 2rem;}
  .card-demo-flex {
    display: flex;
  }
  .card-demo-content01 {
    padding: 10px 0;
  }
  .card-padding {
    padding: 15px;
  }
  .card-demo-flex > div {
    flex: 1;
    text-align: center;
  }
  .card-demo-flex span {
    font-size: 1.3em;
  }
  .green{color:#08ca08}
  .orange{color:#ffbe00}
  .red{color:#f00;}
</style>

<script>
  import { XHeader,Badge,Divider,Card } from 'vux'

  export default {
    name:'Food',
    components: {
      XHeader,Badge,Divider,Card
    },
    mounted() {
      this.$nextTick(function () {
        this.load(1); //概况
      })
    },
    data () {
      return {
        apiUrl: apiUrl,
        apiImgPath:apiImgPath,
        type: '1',
        detail: [],
      }
    },
    computed: {
      // a computed getter
      thumb () {
        // `this` points to the vm instance
        return  this.apiImgPath+this.detail.thumb;
      },
      qrcode(){
         return this.apiImgPath+this.detail.qrcode;
      },
      purineColor(){
        if(this.detail.purine>50){
          return 'red';
        }
        if(this.detail.purine>20){
          return 'orange';
        }

          return 'green';
      }

    },
    methods: {
      success (src, ele) {
        console.log('success load', src)
        const span = ele.parentNode.querySelector('span')
        ele.parentNode.removeChild(span)
      },
      error (src, ele, msg) {
        console.log('error load', msg, src)
        const span = ele.parentNode.querySelector('span')
        span.innerText = 'load error'
      },
      //分类
      load() {

        this.$http.get(this.apiUrl + 'Food/detail', {
          params: {
            'id': this.$route.params.id
          }
        }).then(response => {
          this.detail = response.data;
        }, response => {

          console.log(response);
        });


      }
    }
  }
</script>
